<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsx语法规则</title>
    <style>
        .title{
            background-color: orange;
            width:200px;
        }
    </style>
</head>

<body>
    <!-- 容器 -->
    <div id="test"></div>

    <!-- react.development 必须在 扩展 dom 之前引入 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        // 创建虚拟 DOM 

        /**jsx语法规则
         * 1、script type="text/babel"
         * 2、定义虚拟DOM时不要带引号
         * 3、标签中混入JS表达式时需要用{}
         * 4、样式的类名指定不要用class 要用className
         * 5、内联样式需要使用 style={{key:value}}
         * 6、只有一个根标签
         * 7、标签必须有闭合
         * 8、标签首字母
         *        （1）、若小写字母开头，则将该标签转为同名html元素，若无对应元素，则报错。
         *         (2)、 若大写字母开头，则react将渲染对应组件，若组件未定义，则报错。
         */

        const MyID = 'AtGuiGu';
        const myData = 'Hello ReaCt';
        const VDOM = (
            <h2 id={MyID.toLowerCase()} className="title" style={{color:'white'}}>
                <span>{myData.toLowerCase()}</span>
            </h2>

        )
        // 渲染
        ReactDOM.render(
            VDOM,
            document.getElementById('test')
        )
    </script>
</body>

</html>